import React from 'react'
import oc from 'open-color'
import { useEffect, useRef } from 'react'
import { t } from '/imports/i18n'
import { exportToSvg } from '../app/utils'
import { AppState, LibraryItem } from '../types'
import { CloseIcon } from '/imports/components/icons'

import './SingleLibraryItem.style.scss'
import { ToolButton } from './ToolButton'

const SingleLibraryItem = ({
  libItem,
  appState,
  index,
  onChange,
  onRemove
}: {
  libItem: LibraryItem
  appState: AppState
  index: number
  onChange: (val: string, index: number) => void
  onRemove: (id: string) => void
}) => {
  const svgRef = useRef<HTMLDivElement | null>(null)
  const inputRef = useRef<HTMLInputElement | null>(null)

  useEffect(() => {
    const node = svgRef.current
    if (!node) {
      return
    }
    // eslint-disable-next-line @typescript-eslint/no-extra-semi
    ;(async () => {
      const svg = await exportToSvg({
        elements: libItem.elements,
        appState: {
          ...appState,
          viewBackgroundColor: oc.white,
          exportBackground: true
        },
        files: null
      })
      node.innerHTML = svg.outerHTML
    })()
  }, [libItem.elements, appState])

  return (
    <div className='single-library-item'>
      {libItem.status === 'published' && (
        <span className='single-library-item-status'>{t('labels.statusPublished')}</span>
      )}
      <div ref={svgRef} className='single-library-item__svg' />
      <ToolButton
        aria-label={t('buttons.remove')}
        type='button'
        icon={CloseIcon}
        className='single-library-item--remove'
        onClick={onRemove.bind(null, libItem.id)}
        title={t('buttons.remove')}
      />
      <div
        style={{
          display: 'flex',
          margin: '0.8rem 0',
          width: '100%',
          fontSize: '14px',
          fontWeight: 500,
          flexDirection: 'column'
        }}
      >
        <label
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            flexDirection: 'column'
          }}
        >
          <div style={{ padding: '0.5em 0' }}>
            <span style={{ fontWeight: 500, color: oc.gray[6] }}>
              {t('publishDialog.itemName')}
            </span>
            <span aria-hidden='true' className='required'>
              *
            </span>
          </div>
          <input
            type='text'
            ref={inputRef}
            style={{ width: '80%', padding: '0.2rem' }}
            defaultValue={libItem.name}
            placeholder='Item name'
            onChange={event => {
              onChange(event.target.value, index)
            }}
          />
        </label>
        <span className='error'>{libItem.error}</span>
      </div>
    </div>
  )
}

export default SingleLibraryItem
